<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				/*取消手机点击选择文本的css*/
				-moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-webkit-touch-callout：none;
				/*取消手机点击屏幕时，会出现的灰块*/
				-webkit-text-size-adjust: 100%;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			#container {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
			}
			
			#bottom {
				width: 100%;
				height: 20%;
				background-color: white;
				display: flex;
				border-top: 1px solid #ccc;
				justify-content: space-around;
				align-items: center;
			}
			
			.btn {
				width: 100px;
				height: 30px;
				border: 1px solid;
				text-align: center;
				line-height: 30px;
			}
			
			#touchControl {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
			}
			
			#touchControl>img {
				display: block;
				width: 100%;
			}
			
			#top {
				position: relative;
				width: 100%;
				height: 80%;
			}
			
			#testImg {
				position: absolute;
			}
			
			#canvas {
				/*webkit-transform: translate3d(0, 0, 0);
				-moz-transform: translate3d(0, 0, 0);
				-ms-transform: translate3d(0, 0, 0);
				-o-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);*/
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="top">
				<div id="touchControl">
					<img style="" src="" id="testImg" />
				</div>
				<canvas id="canvas" width="" height=""></canvas>
				<img id="target" style="display: none;" src="img/test.jpeg" />
			</div>
			<div id="bottom">
				<input id="file" class="btn" onchange="change(this)" value="上传图片" type="file" name="image" accept=“image/*”>
				<div id="btn" class="btn" onclick="getImage()">
					生成图片
				</div>
			</div>
		</div>
		<script src="js/hammer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/exif.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ImageFusion.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var fusion;
			//此方法为file input元素的change事件
			function change(t) {
				var file = t.files[0];
				var orientation;
				//EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
				EXIF.getData(file, function() {
					orientation = EXIF.getTag(this, 'Orientation');
				});
				var reader = new FileReader();
				reader.onload = function(e) {
					getImgData(this.result, orientation, function(data) {
						//这里可以使用校正后的图片data了 
						document.getElementById("target").src = data;
						fusion = new ImageFusion("target", "testImg", "canvas", "touchControl");
						fusion.init();
					});
				}
				reader.readAsDataURL(file);
			}
			// @param {string} img 图片的base64
			// @param {int} dir exif获取的方向信息
			// @param {function} next 回调方法，返回校正方向后的base64
			function getImgData(img, dir, next) {
				var image = new Image();
				image.onload = function() {
					var degree = 0,
						drawWidth, drawHeight, width, height;
					drawWidth = this.naturalWidth;
					drawHeight = this.naturalHeight;
					//以下改变一下图片大小
					var maxSide = Math.max(drawWidth, drawHeight);
					if(maxSide > 1024) {
						var minSide = Math.min(drawWidth, drawHeight);
						minSide = minSide / maxSide * 1024;
						maxSide = 1024;
						if(drawWidth > drawHeight) {
							drawWidth = maxSide;
							drawHeight = minSide;
						} else {
							drawWidth = minSide;
							drawHeight = maxSide;
						}
					}
					var canvas = document.createElement('canvas');
					canvas.width = width = drawWidth;
					canvas.height = height = drawHeight;
					var context = canvas.getContext('2d');
					//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
					switch(dir) {
						//iphone横屏拍摄，此时home键在左侧
						case 3:
							degree = 180;
							drawWidth = -width;
							drawHeight = -height;
							break;
							//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
						case 6:
							canvas.width = height;
							canvas.height = width;
							degree = 90;
							drawWidth = width;
							drawHeight = -height;
							break;
							//iphone竖屏拍摄，此时home键在上方
						case 8:
							canvas.width = height;
							canvas.height = width;
							degree = 270;
							drawWidth = -width;
							drawHeight = height;
							break;
					}
					//使用canvas旋转校正
					context.rotate(degree * Math.PI / 180);
					context.drawImage(this, 0, 0, drawWidth, drawHeight);
					//返回校正图片
					next(canvas.toDataURL("image/jpeg", .8));
				}
				image.src = img;
			}
			var imgsrc = ''
			document.getElementById("testImg").src = imgsrc;

			function getImage() {
				var img = fusion.createImage();
				document.getElementById("touchControl").appendChild(img);
				alert("长按保存");
			}
		</script>
	</body>

</html>